<template>
	<view class="mySetting">
		<view class="center-box">
			<view class="phtoto">
				<image class="images" :src="baseOssUrl2 + form.tx" mode="" @click="onChooseavatar"></image>
			</view>
			<view class="item-box">
				<view class="name">
					姓名
				</view>
				<view class="right-box">
					<input type="text" placeholder-style="font-size: 28rpx;color: #A7A7A7;" placeholder="请输入名称" v-model="form.username">
				</view>
			</view>
			<view class="item-box">
				<view class="name">
					手机号
				</view>
				<view class="right-box">
					<input type="text" placeholder-style="font-size: 28rpx;color: #A7A7A7;" placeholder="请输入手机号" v-model="form.mobile">
				</view>
			</view>
			<!-- <view class="item-box">
				<view class="name">
					性别
				</view>
				<view class="right-box">
					<radio-group @change="radioChange" style="display: flex;">
						<label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in genderList"
							:key="item.value" style="display: flex;margin-left: 30rpx;">
							<view>
								<radio :value="item.value" color="#35743d" :checked="index === current"
									style="transform:scale(0.7)" />
							</view>
							<view>{{item.name}}</view>
						</label>
					</radio-group>
				</view>
			</view> -->
			<!-- <view class="item-box">
				<view class="name">
					生日
				</view>
				<view class="right-box">
					<picker mode="date" :value="form.date" :start="startDate" :end="endDate" @change="bindDateChange">
						<view class="space" v-if="form.date==''">请选择生日</view>
						<view class="uni-input" v-else>{{form.date}}</view>
					</picker>
				</view>
			</view>
			<view class="item-box-last">
				<view class="name">
					城市
				</view>
				<view class="right-box">
				<picker mode="region" @change="addressChange">
					<view class="space" v-if="form.city.length==0">
						请选择城市
					</view>
					<view class="" v-else>
						{{form.city[0]}}&nbsp;{{form.city[1]}}&nbsp;{{form.city[2]}}
					</view>
					</picker>
				</view>
			</view> -->
		</view>
		<view class="out-box">
			<view class="bnt-box" @click="addbnt()">
				保存
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import {
		baseOssUrl,
		baseOssUrl2,
		baseApiUrl
	} from '@/common/settings';
	export default {
		//登录状态
		computed: mapState(['isLogin']),
		data() {
			return {
				form:{
					tx:'',//头像
					username:'',//姓名
					mobile:'',//手机号
					gender:'男',//性别
					date:'',//生日
					city:[],//城市
				},
				userInfo: {},
				baseOssUrl: baseOssUrl,
				baseOssUrl2:baseOssUrl2,
				baseApiUrl:baseApiUrl,
				current: 0,
				genderList: [{
						value: '0',
						name: '男'
					},
					{
						value: '1',
						name: '女'
					}
				],
				address:[]
			}
		},
		onLoad() {
			this.get()
			// this.getSelectCyOrderDetailed()
		},
		methods: {
			...mapMutations(['login', 'logout']),
			onChooseavatar(e) {
				uni.chooseImage({
					count: 1, //默认9
					sizeType: 'compressed', //可以指定是原图还是压缩图，默认二者都有
					success: res => {
						uni.showLoading({
							title: '加载中'
						});
						for (let i = 0; i < res.tempFilePaths.length; i++) {
							const tempFilePaths = res.tempFilePaths[i]
							uni.uploadFile({
								url: this.baseApiUrl  + '/x/sys/oss/upload',
								filePath: tempFilePaths,
								name: 'file',
								header: {
									'token': uni.getStorageSync('yc_m_token'),
								},
								success: (uploadFileRes) => {
									console.log(uploadFileRes, 'uploadFileRes')
									this.form.tx = JSON.parse(uploadFileRes.data).url
									
									uni.hideLoading();
								}
							});
						}
					}
				})
			},
			get() {
				this.$http.get(this.$httpApi.getInfo, {
					data: {
						 id: uni.getStorageSync('userinfo').userId
					}
				}).then(res => {
					if (res.code == 0) {
						this.form = res.user
						console.log(JSON.parse(res.page[0].catering.content))
					}
				})
			},
			radioChange: function(evt) {
				console.log(evt);
				for (let i = 0; i < this.genderList.length; i++) {
					if (this.genderList[i].value === evt.detail.value) {
						this.current = i;
						this.form.gender = this.genderList[this.current].name
						break;
					}
				}
			},
			// 保存
			addbnt() {
				this.$http.post(this.$httpApi.userUpdate, {
					data: {
						userId :this.form.userId,
						username : this.form.username,
						tx:this.form.tx,
						mobile: this.form.mobile
					}
				}).then(res => {
					if (res.code == 0) {
						uni.showToast({
							title: '修改成功！',
							duration: 2000
						});
						setTimeout(res=>{
							var userinfo = uni.getStorageSync('userinfo')
							userinfo.mobile = this.form.mobile
							uni.setStorageSync('userinfo', userinfo)
							uni.navigateBack(-1)
						},1000)
					}
				})
			},
			bindDateChange(e) {
				this.form.date = e.detail.value
			},
			addressChange(e){
				this.form.city= e.detail.value
			}
		}
	}
</script>
<style>
	page {
		background: #EFEFEF;
	}
</style>
<style lang="scss" scoped>
	.mySetting {
		height: 100%;
		padding: 24rpx 32rpx 32rpx 32rpx;

		.center-box {
			border-radius: 8rpx;
			background-color: #ffffff;
			padding: 0rpx 32rpx 0rpx 32rpx;

			.phtoto {
				padding-top: 40rpx;
				padding-bottom: 60rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				button {
							background: #fff;
							line-height: 80rpx;
							height: auto;
							width: auto;
							padding: 20rpx 30rpx;
							margin: 0;
							display: flex;
							justify-content: center;
							align-items: center;
							.refreshIcon {
								width: 160rpx;
								height: 160rpx;
								border-radius: 50%;
							}
							.jt{
								width: 14rpx;
								height: 28rpx;
							}
						}
				.images {
					border: 1px solid #E3E3E3;
					width: 114rpx;
					height: 114rpx;
					background: #FFFFFF;
					border-radius: 50%;
				}
			}

			.item-box {
				display: flex;
				align-items: center;
				padding: 24rpx 0 16rpx 0;
				border-bottom: 1px solid #E3E3E3;

				.name {
					font-size: 30rpx;
					color: #1D1D1D;
				}

				.right-box {
					margin-left: auto;
					text-align: right;
					.space{
						color: #A7A7A7;
						font-size: 28rpx;
					}
				}
			}

			.item-box-last {
				display: flex;
				align-items: center;
				padding: 24rpx 0 16rpx 0;

				.name {
					font-size: 30rpx;
					color: #1D1D1D;
				}

				.right-box {
					margin-left: auto;
					text-align: right;
					.space{
						color: #A7A7A7;
						font-size: 28rpx;
					}
				}
			}
		}

		.out-box {
			margin-top: 385rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			.bnt-box {
				width: 686rpx;
				height: 72rpx;
				background: #35743D;
				border-radius: 50rpx;
				text-align: center;
				line-height: 72rpx;
				font-weight: 500;
				color: #FFFFFF;
			}
		}
	}
</style>
